<template>
  <div id="printArea" class="printArea">
    <div class="print-content">
      <div class="title">付款申请审批单</div>
      <div class="top">
        <span class="text" style="margin-right:40px;">飞博共创</span>
        <span class="text">申请日期：{{ printData.createTime | format('YYYY-MM-DD') }}</span>
      </div>
      <div class="table">
        <div v-if="printData.status === 4" class="status-icon">
          <img :src="success" alt="success">
        </div>
        <div v-else-if="printData.status === 5" class="status-icon">
          <img :src="close" alt="close">
        </div>
        <el-row class="cell bb" type="flex">
          <el-col :span="4" class="response-item br">结算名称</el-col>
          <el-col :span="8" class="response-item br">{{ printData.settleName || '--' }}</el-col>
          <el-col :span="4" class="response-item br">结算单号</el-col>
          <el-col :span="8" class="response-item">{{ printData.settleId || '--' }}</el-col>
        </el-row>
        <el-row class="cell bb" type="flex">
          <el-col :span="4" class="response-item br">申请人</el-col>
          <el-col :span="8" class="response-item br">{{ printData.proposer || '--' }}</el-col>
          <el-col :span="4" class="response-item br">申请人部门</el-col>
          <el-col :span="8" class="response-item">{{ printData.department || '--' }}</el-col>
        </el-row>
        <el-row class="cell bb">
          <el-col :span="4" class="cell-item br">所属公司</el-col>
          <el-col :span="20" class="cell-item">{{ printData.ourTitle || '--' }}</el-col>
        </el-row>
        <el-row class="cell bb">
          <el-col :span="4" class="cell-item br">账户类型</el-col>
          <el-col :span="20" class="cell-item">{{ printData.accountType | accountTypeFilter }}</el-col>
        </el-row>
        <el-row class="cell bb">
          <el-col :span="24" class="cell-item center">付款明细</el-col>
        </el-row>
        <el-row class="cell bb">
          <el-col :span="2" class="cell-item br">序号</el-col>
          <el-col :span="4" class="cell-item br">付款项目</el-col>
          <el-col v-if="printData.accountType === 1" :span="5" class="cell-item br">达人到手金额(元)</el-col>
          <el-col :span="5" class="cell-item br">实付金额(元)</el-col>
          <el-col :span="8" class="cell-item">收款人信息</el-col>
        </el-row>
        <template v-if="printData.fundsList && printData.fundsList.length > 0">
          <el-row v-for="(item, index) in printData.fundsList" :key="`fundsList${index}`" type="flex" class="withdrawAmountlist cell bb">
            <el-col :span="2" class="withdrawAmount-item br">{{ index+1 }}</el-col>
            <el-col :span="4" class="withdrawAmount-item br">{{ item.project || '--' }}</el-col>
            <el-col v-if="printData.accountType === 1" :span="5" class="withdrawAmount-item br">
              <template v-if="item.withdrawAmount || item.withdrawAmount === 0">
                {{ (item.withdrawAmount) | moneyFilter }}
              </template>
              <template v-else>--</template>
            </el-col>
            <el-col :span="5" class="withdrawAmount-item br">
              <template v-if="item.actualAmount || item.actualAmount === 0">
                {{ (item.actualAmount) | moneyFilter }}
              </template>
              <template v-else>--</template>
            </el-col>
            <el-col :span="8" class="withdrawAmount-item">{{ item.payeeInfo || '--' }}</el-col>
          </el-row>
        </template>
        <el-row class="cell bb" type="flex">
          <el-col :span="4" class="response-item br">本次结算金额(总)</el-col>
          <el-col :span="20" class="response-item">{{ printData.payMoney || '--' }}</el-col>
        </el-row>
        <el-row v-if="showAllocation()" class="cell bb">
          <el-col :span="24" class="cell-item center">分摊费用</el-col>
        </el-row>
        <el-row v-if="showAllocation()" class="cell bb">
          <el-col :span="2" class="cell-item br">序号</el-col>
          <el-col :span="6" class="cell-item br">分摊部门</el-col>
          <el-col :span="4" class="cell-item br">分摊金额</el-col>
          <el-col :span="12" class="cell-item">分摊说明</el-col>
        </el-row>
        <template v-if="showAllocation()">
          <el-row v-for="(item, index) in printData.allocationList" :key="`allocationList${index}`" type="flex" class="withdrawAmountlist cell bb">
            <el-col :span="2" class="withdrawAmount-item br">{{ index+1 }}</el-col>
            <el-col :span="6" class="withdrawAmount-item br">{{ item.departmentName || '--' }}</el-col>
            <el-col :span="4" class="withdrawAmount-item br">
              <template v-if="item.amount|| item.amount === 0">
                {{ (item.amount) | moneyFilter }}
              </template>
              <template v-else>--</template>
            </el-col>
            <el-col :span="12" class="withdrawAmount-item">{{ item.remark || '--' }}</el-col>
          </el-row>
        </template>
        <el-row v-if="showAllocation()" class="cell bb" type="flex">
          <el-col :span="4" class="response-item br">总分摊金额</el-col>
          <el-col :span="20" class="response-item">{{ printData.totalAllocationAmount || '--' }}</el-col>
        </el-row>
        <el-row class="cell" type="flex" align="center">
          <el-col :span="4" class="examine-title br">审批流程</el-col>
          <el-col :span="20" class="examine-list">
            <template v-if="printData.process && printData.process.length">
              <div v-for="(item, index) in printData.process" :key="`process${index}`" class="examine-item">
                <div class="content">{{ item.content }}</div>
                <div class="time">{{ item.time | format('YYYY/MM/DD HH:mm') }}</div>
              </div>
            </template>
            <div v-else class="examine-item">
              <div class="content"/>
              <div class="time"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footre">
        <span class="text" style="margin-right:40px;">打印时间：{{ nowTime | format('YYYY-MM-DD HH:mm') }}</span>
        <span class="text">打印人：{{ userInfo.userName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { format } from '@/filters/date';
import { mapState } from 'vuex';
import { moneyFilter } from '@/filters/number';
// png
import success from '@/assets/auditProcess/process_status_4.png';
import close from '@/assets/auditProcess/process_status_6.png';
export default {
  filters: {
    format, moneyFilter,
    accountTypeFilter(status) {
      if (!status) return '--';
      const obj = {
        '1': '第三方账户',
        '2': '对公银行账户',
        '3': '对公其他账户'
      };
      return obj[status.toString()];
    }
  },
  props: {
    printData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isAllocation: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      nowTime: new Date(),
      success, close
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    })
  },
  methods: {
    showAllocation() {
      const temp = this.isAllocation && this.printData.allocationList && this.printData.allocationList.length > 0;
      // console.log(temp);
      return temp;
    }
  }
};
</script>

<style lang="scss" scoped>
.printArea {
  position: fixed;
  display: none;
  z-index: -2000;
  width: 1000px;
  background: rgba($color: #000000, $alpha: 0.5);
  left: 50%;
  top: 0;
  margin-left: -500px;
  padding: 20px;
}
.print-content {
  padding: 0;
  background: #fff;
  .title {
    font-size: 20px;
    text-align: center;
    color: #333;
    margin-bottom: 24px;
  }
  .text  {
    font-size: 14px;
    color: #333;
  }
  .table {
    margin: 10px 0;
    border: 1px solid #333;
    position: relative;
    .flex {
      display: flex;
      align-items: center;
    }
    .cell-item {
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #333;
      padding: 0 10px;
    }
    .examine-title {
      font-size: 14px;
      color: #333;
      padding: 0 10px;
      display: flex;
      align-items: center;
    }
    .examine-item {
      padding: 8px 10px;
      border-bottom: 1px solid #333;
      font-size: 14px;
      min-height: 32px;
      color: #333;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: none;
      }
      .content {
        flex:1;
        margin-right: 10px;
      }
    }
  }
  .bl {
    border-left: 1px solid #333;
  }
  .br {
    border-right: 1px solid #333;
  }
  .bb {
    border-bottom: 1px solid #333;
  }
  .center {
    text-align: center;
  }
  .status-icon {
    position: absolute;
    top: -30px;
    right: 10px;
    z-index: 100;
    width: 80px;
    height: 80px;
    img {
      width: 100%;
    }
  }
}
// .withdrawAmountlist {
//   display:flex;
//   align-items: center;
// }
.withdrawAmountlist .withdrawAmount-item {
  line-height: 1.3;
  padding: 7px 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #333;
}
.response-item {
  line-height: 1.3;
  padding: 7px 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  color: #333;
}
</style>
